<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圣米庐 | 系统资源</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="css/bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-box.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-page.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="js/resizableColumns/jquery.resizableColumns.css">
        <link href="js/validator/jquery.validator.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/resizableColumns/jquery.resizableColumns.js"></script>
        <script type="text/javascript" src="js/jsviews.js"></script>
        <script type="text/javascript" src="js/loadTmpl.js"></script>
        <script type="text/javascript" src="js/tableGrid/jquery.tableGrid.js"></script>
        <script	type="text/javascript" src="js/validator/jquery.validator.js"></script>
		<script type="text/javascript" src="js/validator/local/zh_CN.js"></script>
        <script type="text/javascript">  
        $.views.converters({
        	"isSelected":function(first,last){
            	if(first==null) return "";
    			return first.parentId==last? "selected=selected":"";
    		},
    		"showTypeSelected":function(first,last){
            	if(first==null) return "";
    			return first.showType==last? "selected=selected":"";
    		}
        });
        	//从后台取数据，并加载模板
	        function displayContent(){
	        	var resourceName = $("#resourceName").val();
				var nextPage=$("#_click_page").val();			//不变
				if(typeof(nextPage) == 'undefined' || nextPage==""){
					nextPage=0;
				}
				var sortDate="[{property:'orderNum',direction:'ASC'}]";
				var jsonFilter="{search_LIKE_resourceName:\""+resourceName+"\"}";
				var url="xaCmsResource/showResource/"+nextPage+"/"+sortDate+"/"+jsonFilter;
				$.ajax({
					url:url,
					dataType:'json',
					success:function(data){
						var tableData=data.content;
		            	var tblContentHtml = $("#tableContentTmple").render(tableData);
		            	$("#mycontent").html(tblContentHtml);
		            	//加载分页器
		            	loadTmpl.renderExternalTemplate("page", "#displayPage", data);
					}
				});
	        }
			$(function(){
				$("#example2").resizableColumns({});	//列拖动
				//行高亮,选中
				$("#example2").tableGrid({
					checkAllId:"_selectAll",	//全选框的ID属性
					singleCheckboxClass:"ckSelect",
					selectRowClass:"warning",
					paging:"displayPage",
					pageAjax:function(){
						displayContent();
					}
				});
				//点击新增按钮
				$("#addSome").click(function(){
					$.ajax({
						url:"xaCmsResource/showParent/"+0,
						type:'get',
						dataType:'json',
						success:function(selectData){
							if(Object.keys(selectData).length===0) selectData="";		//判断后台传的集合为空，当集合为空时，jsrender不加载模板
							var selectContentHtml = $("#newOrupdateTmpl").render(selectData);
							$("#myModal").html(selectContentHtml);
							$("#myModal").modal();
						}
					});
				});
				
				//新增或修改
				$(document).on('click',"#saveOrupdate",function(){
					$("#validateForm").isValid(function(result){
					    if(!result){
							alert("还有未填写或选择的字段，请检查！");
							return;
					    }
						var resourceId1=$("#resourceId1").val();
						var resourceName1=$("#resourceName1").val();
						var resourceUrl1=$("#resourceUrl1").val();
						var parentId1=$("#parentId1").val();
						var showType1=$("#showType1").val();
						var resource="";
						var url="";
						if(resourceId1==""){
						//新增
							resource={"resourceName":resourceName1,
								"resourceUrl":resourceUrl1,
								"parentId":parentId1,
								"showType":showType1
							};
							url="xaCmsResource";	
							$.ajax({
								url:url,
								type:"post",
								dataType: "json",
				                contentType: "application/json",
								data:JSON.stringify(resource),
								success:function(data){
									if(data.status==1){
										$('#myModal').modal('hide');
										displayContent();
									}
								}
							});
						}else{
							//修改
							resource={"resourceId":resourceId1,
								"resourceName":resourceName1,
								"resourceUrl":resourceUrl1,
								"parentId":parentId1,
								"showType":showType1
							};
							url="xaCmsResource/update";
							$.ajax({
								url:url,
								type:"PUT",
								dataType: "json",
				                contentType: "application/json",
								data:JSON.stringify(resource),
								success:function(data){
									if(data.status==1){
										$('#myModal').modal('hide');
										displayContent();
									}
								}
							});
						}
					});
				});
				//点击修改按钮
				$("#updateSome").click(function(){
					var updateArray=new Array();
					$(".ckSelect").each(function(){
                    	var check=$(this).is(':checked');
                    	if(check){
							var _id =$(this).attr("ckId");
							updateArray.push(_id);
                        }
                    });
					if(updateArray.length==0){
						alert("请选择要编辑的项");
						return;
					}
					if(updateArray.length>1){
						alert("每次只能编辑一项");
						return;
					}
					$.ajax({
						url:"xaCmsResource/showParent/"+updateArray[0],
						type:"get",
						dataType: "json",
		                contentType: "application/json",
						success:function(selectData){
							if(Object.keys(selectData).length===0) selectData="";		//判断后台传的集合为空，当集合为空时，jsrender不加载模板
							var selectContentHtml = $("#newOrupdateTmpl").render(selectData);
							$("#myModal").html(selectContentHtml);
							$("#myModal").modal();
						}
					});
				});
				//点击查询按钮
				$("#search").click(function(){
					displayContent();
				});
				//点击删除按钮
				$("#delSome").click(function(){
					var delStr="";
					var delArray=new Array();
					$(".ckSelect").each(function(){
                    	var check=$(this).is(':checked');
                    	if(check){
							var _id =$(this).attr("ckId");
							delStr+=parseInt(_id)+",";
							delArray.push(_id);
                        }
                    });
                    if(delStr.length==0){
						alert("请选择要删除的项");
						return
                    }
                    if(confirm("你确定要删除选中项吗？")){
                    	var delIds="{ids:\""+delArray+"\"}";
                    	var url="xaCmsResource/resource/"+delIds;
                    	$.ajax({
							url:url,
							type:'DELETE',
							dataType:'json',
							success:function(data){
								if(data.status==1){
									displayContent();
								}else{
									alert(data.result);
								}
							}
                        });
                    }
				});
			});
			
        </script>
    </head>
    <body>
      <section>
          <div>
              <div class="col-xs-12">
                  <div class="box">
                      <div class="box-header">
                      <br>
                       <span class="add-on">资源名称:</span><input type="text" id="resourceName"/>
                          <input type="button" value="search" id="search" class="btn btn-primary">
                      </div>
                      <div class="box-header">
                      <br>
                          <input type="button" value="add" id="addSome" class="btn btn-success">
                          <input type="button" value="del" id="delSome" class="btn btn-danger">
                          <input type="button" value="update" id="updateSome" class="btn btn-info">
                      </div>
                      <div class="box-body table-responsive">
                          <table id="example2" class="table table-bordered table-hover">
                              <thead>
                                  <tr>
                                      <th><input type="checkbox" id="_selectAll" /></th>
                                      <th id='parentId'>父资源ID</th>
                                      <th id='resourceId'>资源ID</th>
                                      <th id='resourceName'>资源名称</th>
                                      <th id='showType'>资源级别</th>
                                      <th id='resourceUrl'>URL</th>
                                  </tr>
                              </thead>
                              <!-- 表格内容 start -->
                              <tbody id="mycontent"></tbody>
                              <!-- 表格内容 end -->
                          </table>
                          <!-- 分页标签 start -->
                          <div class="row" id="displayPage"></div>
                          <!-- 分页标签 end -->
                          <script id="tableContentTmple" type="text/x-jsrender">
								<tr><td><input id="ck_{{:resourceId}}" ckId="{{:resourceId}}" class="ckSelect" type="checkbox" /></td><td>{{:parentId}}</td><td>{{:resourceId}}</td><td>{{:resourceName}}</td><td>{{if showType==0}}页面级{{else showType==1}}按钮级{{else}}菜单级{{/if}}</td><td>{{:resourceUrl}}</td></tr>
						  </script>
                  </div>
              </div>
          </div>
      </section>
<!-- 新增对话框  start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
</div>

<script type="text/x-jsrender" id="newOrupdateTmpl">
<form id="validateForm">
	<div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
{{if selectedId}}
               修改资源信息
{{else}}
               新增资源信息
{{/if}}
            </h4>
         </div>
         <div class="modal-body">
            <fieldset> 
				<div class="control-group">
					<label for="userPhoto2" class="control-label">资源名称</label>
					<div class="controls">
						{{if selectedId}}
							<input type="text" placeholder="请填写资源名称" data-rule="资源名称:required;length[2~30]" id="resourceName1" name="resourceName" value="{{:selectedId.resourceName}}" />
							<input type="hidden" id="resourceId1" value="{{:selectedId.resourceId}}" />
						{{else}}
							<input type="text" placeholder="请填写资源名称"  data-rule="资源名称:required;length[2~30]" id="resourceName1" name="resourceName" />
							<input type="hidden" id="resourceId1" />
						{{/if}}
					</div>
				</div>
				<!-- Select Basic -->
				<div class="control-group">
					<label for="userType" class="control-label">父资源</label>
					<div class="controls" id="parentResourceContainer">
						<select id="parentId1" name="parentId">
							<option value="">选择父资源</option>
							{{for optionItem}}
								<option value="{{:resourceId}}" {{isSelected:#parent.parent.data.selectedId resourceId}}>{{:resourceName}}</option>
							{{/for}}
						</select>
					</div>
				</div>
				<div class="control-group">
					<label for="userType" class="control-label">资源类别</label>
					<div class="controls" id="parentResourceContainer">
						<select id="showType1" name="showType1"  data-rule="required;">
							<option value="">选择资源类别</option>
							<option value="0" {{showTypeSelected:selectedId 0}}>页面级</option>
							<option value="1" {{showTypeSelected:selectedId 1}}>按钮级</option>
							<option value="2" {{showTypeSelected:selectedId 2}}>菜单级</option>
						</select>
					</div>
				</div>
				<div class="control-group">
					<label for="userPassword" class="control-label">资源路径</label>
					<div class="controls">
					{{if selectedId}}
						<input type="text" required="required" id="resourceUrl1"  placeholder="请输入资源相对路径" name="resourceUrl" value="{{:selectedId.resourceUrl}}"/>
					{{else}}
						<input type="text" required="required" id="resourceUrl1"  placeholder="请输入资源相对路径" name="resourceUrl"/>
					{{/if}}
					</div>
				</div>
			</fieldset>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" id="saveOrupdate" class="btn btn-primary">
               确定
            </button>
         </div>
      </div>
</form>
</script>


<!-- 新增对话框  end -->
    </body>
</html>